<template>
    <div class="home-wrap" @scroll="pageScroll" ref="homeWrap">
        <div class="home">
            <div class="logo">
                <img :src="require('@/assets/img/home/logo.png')" alt="">
            </div>
            <div class="home-search-header-absolute" v-if="!showSearchFix">
                <SearchHeader
                    :shape="`square`"
                />
            </div>
            <div class="home-search-header-fixed" v-if="showSearchFix">
                <SearchHeader
                    :shape="`square`"
                />
            </div>
            <div class="home-banner">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item
                        v-for="item in bannerList"
                        :key="item.uuid"
                    >
                        <img :src="item.src" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="home-entry-center">
                <li
                    v-for="item in entryCenterList"
                    :key="item.uuid"
                >
                    <img :src="item.src" alt="">
                    <p>{{ item.entryName }}</p>
                </li>
            </div>
            <div class="home-one-column">
                <div
                    v-for="item in oneColumnList"
                    :key="item.uuid"
                >
                    <img :src="item.src" alt="">
                </div>
            </div>
            <div class="four-palace">
                <HomeFourPalace
                    v-if="fourPalaceData"
                    :fourPalaceData="fourPalaceData"
                />
            </div>
            <div class="goods-row">
                <HomeGoodsRow
                    v-for="item in goodsRowList"
                    :key="item.uuid"
                    :goodsRowData="item"
                />
            </div>
            <div class="home-two-column">
                <div
                    v-for="item in twoColumnList"
                    :key="item.uuid"
                >
                    <img :src="item.src" alt="">
                </div>
            </div>
            <div class="waterfall">
                <HomeWaterfall
                />
            </div>
            <div
                class="home-return-top"
                v-if="showReturnTop"
                @click="returnTop"
            >
                <ReturnTop />
            </div>
            <div class="my-notice">
                <van-button type="info" @click="showMyNoticeEvent" class="my-notice-btn" size="mini">项目说明</van-button>
                <van-popup v-model="showMyNotice">
                    <h4>Smartisan商城前端练习项目-移动端</h4>
                    <p>作者：<em>zhudeshuai0606@163.com</em></p>
                    <p>项目说明：<a href="https://gitee.com/zhudeshuai0606/myStation-smartisan-mobile.git">点此跳转</a></p>
                    <div class="btn-box">
                        <van-button type="warning" size="small" round @click="returnMyStation">返回个人网站主页</van-button>
                        <van-button type="primary" size="small" round @click="clearCache">清除缓存</van-button>
                    </div>
                </van-popup>
            </div>
        </div>
    </div>
</template>

<script>
import HomeFourPalace from '@/components/HomeFourPalace'
import HomeGoodsRow from '@/components/HomeGoodsRow'
import HomeWaterfall from '@/components/HomeWaterfall'
import SearchHeader from '@/components/SearchHeader'
import ReturnTop from '@/components/ReturnTop'
export default {
    name: 'home',
    data () {
        return {
            bannerList: [],
            entryCenterList: [],
            oneColumnList: [],
            twoColumnList: [],
            fourPalaceData: null,
            goodsRowList: [],
            showSearchFix: false,
            showReturnTop: false,
            showMyNotice: false
        }
    },
    methods: {
        pageScroll () {
            // console.log(this.$refs.homeWrap.scrollTop)
            if (this.$refs.homeWrap.scrollTop >= 35) {
                this.showSearchFix = true
            } else {
                this.showSearchFix = false
            }
            if (this.$refs.homeWrap.scrollTop >= 700) {
                this.showReturnTop = true
            } else {
                this.showReturnTop = false
            }
        },
        returnTop () {
            // this.$refs.homeWrap.scrollTop = 0
            const start = this.$refs.homeWrap.scrollTop
            const timer = setInterval(() => {
                // console.log(this)
                this.$refs.homeWrap.scrollTop -= start * 0.2
                if (this.$refs.homeWrap.scrollTop <= 0) {
                    window.clearInterval(timer)
                }
            }, 25)
        },
        showMyNoticeEvent () {
            this.showMyNotice = true
        },
        returnMyStation () {
            window.open('http://101.201.68.146', '_self')
        },
        clearCache () {
            localStorage.removeItem('user')
            localStorage.removeItem('cart')
            localStorage.removeItem('userData')
            localStorage.removeItem('cartData')
            location.reload()
        }
    },
    created () {
        this.$http.getHomeData()
            .then(resp => {
                // console.log(resp)
                this.bannerList = resp.filter(item => item.type === 'banner')[0].content
                this.entryCenterList = resp.filter(item => item.type === 'entryCenter')[0].content
                // console.log(this.entryCenterList)
                this.oneColumnList = resp.filter(item => item.type === 'oneColumn')[0].content
                // console.log(this.oneColumnList)
                this.twoColumnList = resp.filter(item => item.type === 'twoColumn')[0].content
                this.fourPalaceData = resp.filter(item => item.type === 'fourPalace')[0].content
                // this.time = this.fourPalaceData[0].floor[0].activityInfo.endTime * 1000 - new Date().getTime()
                // console.log(this.fourPalaceData)
                resp.forEach(item => {
                    if (item.type === 'goodsRow') {
                        this.goodsRowList.push(item)
                    }
                })
            })
    },
    components: {
        HomeFourPalace,
        HomeGoodsRow,
        HomeWaterfall,
        SearchHeader,
        ReturnTop
    }
}
</script>

<style lang="scss">
.home-wrap {
    height: 100%;
    overflow-x: hidden;
}
.home {
    position: relative;
    .logo {
        padding: 5px 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2;
        width: 25px;
        height: 25px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .home-search-header-absolute,
    .home-search-header-fixed {
        position: absolute;
        top: 35px;
        left: 0;
        width: 100%;
        z-index: 3;
        .search-header {
            // background-color: #f40;
            .van-search {
                background-color: transparent;
                .van-search__content {
                    background-color: #fff;
                    border-radius: 8px;
                    border: 1px solid #d9d9d9;
                    .van-cell {
                        color: #999;
                    }
                }
            }
        }
    }
    .home-search-header-fixed {
        position: fixed;
        top: 0;
        border-bottom: 1px solid #d9d9d9;
        .search-header .van-search {
            background-color: #fff;
        }
    }
    .home-banner {
        img {
            width: 100%;
        }
    }
    .home-entry-center {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        flex-wrap: wrap;
        li {
            height: 90px;
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            img {
                width: 42px;
            }
            p {
                font-size: 10px;
                color: #666;
            }
        }
    }
    .home-one-column {
        img {
            width: 100%;
        }
    }
    .home-two-column {
        display: flex;
        img {
            width: 100%;
        }
    }
    .my-notice {
        .my-notice-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 101;
        }
        .van-popup {
            font-size: 14px;
            box-sizing: border-box;
            padding: 5px;
            width: 90%;
            h4 {
                font-size: 16px;
                color: #f40;
                font-weight: bold;
                text-align: center;
                margin-bottom: 20px;
            }
            p {
                margin-top: 5px;
                em {
                    color: deepskyblue;
                }
            }
        }
        .btn-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
    }
}
</style>
